import React from "react";
import { Popover } from "antd";

import "./index.css";

interface Option {
  value: string;
  label: string | React.ReactNode;
  icon: React.ReactNode;
  children?: Option[];
}

const MenuHover: React.FC<{
  options: Option[];
  onDragStartCallback: Function; //托拽开始时回调
}> = ({ options, onDragStartCallback }) => {
  return (
    <div className="menuhover">
      {options.map((option, index) => {
        return (
          <Popover
            key={index}
            content={
              <div className="menuhover-children">
                {option?.children?.map((childOption, index) => (
                  <div
                    key={index}
                    className="menuhover__item"
                    draggable
                    unselectable="on"
                    onDragStart={(e) => {
                      onDragStartCallback();
                      e.dataTransfer.setData("vizType", childOption.value);
                    }}
                  >
                    <div className="menuhover__item-icon">
                      {childOption.icon}
                    </div>
                    <div className="menuhover__item-label">
                      {childOption.label}
                    </div>
                  </div>
                ))}
              </div>
            }
          >
            <div className="menuhover__item">
              <div className="menuhover__item-icon">{option.icon}</div>
              <div className="menuhover__item-label"> {option.label}</div>
            </div>
          </Popover>
        );
      })}
    </div>
  );
};

export default MenuHover;
